import React from 'react'
import { useHistory  } from 'react-router-dom'
import Header from '../../header/Header'

import {
  Container
} from '../StyledTem'
import { useLocation } from 'react-router-dom'
import daka from '../../../assets/images/daka/images/daka_1.png'
// import { useSelector } from 'react-redux'

const Template = (props) => {
  let location = useLocation()
  let history = useHistory()
  // let list = useSelector(state => state.daka.lists)
  // let info = list[props.index]
  let info = location.state.index
  console.log(location.state.index);
  const  handleClik=(info)=>{
    return(()=>{
      history.push('/dknew',{info})
    })
      
    }
  return ( 
    <Container>
    <div>
      <div>
       <Header bgc="rgba(48,139,254,0)"></Header>
       <div className="top">
         <div className="img"><img src={info.dkPhoto} alt=""/></div>
         <div className='text'>
         <h1>{info.dkName}</h1>
         <span>周期20&nbsp;&nbsp;&nbsp;频次工作日</span>
         </div>
       </div>
      <p>{info.dkBody}</p>
      <div className="bot"><img src={`${daka}`} alt=""/></div>
      <div className='btn'>
      <button
      onClick={handleClik(info)}
      >使用打卡</button>
      </div>
      </div>
    </div>
    </Container>
   );
}
 
export default Template;